"use client";
import { Avatar, Card, Flex, List } from "antd";
import Meta from "antd/es/card/Meta";
import Item from "antd/es/list/Item";
import Paragraph from "antd/es/typography/Paragraph";
import Link from "next/link";

interface Props {
  questionBankList: API.QuestionBankVO[];
}
/**
 * 题库列表组件
 * @param 题库列表组件
 * @returns 
 */
const QuestionBankList: React.FC<Props> = ({ questionBankList }) => {
  const questionBankView = (questionBank: API.QuestionBankVO) => {
    return (
      <Card hoverable>
        <Link href={`/bank/${questionBank.id}`}>
          <Meta
            avatar={<Avatar src={questionBank.picture} />}
            title={questionBank.title}
            description={
              <Paragraph
                type="secondary"
                ellipsis={{ rows: 1, expandable: false, tooltip: true }}
                style={{ marginBottom: 0 }}
              >
                {questionBank.description}
              </Paragraph>
            }
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          />
        </Link>
      </Card>
    );
  };
  return (
    <div className="questionBank-list">
      <List
        grid={{
          gutter: 16,
          xs: 1,
          sm: 2,
          md: 3,
          lg: 3,
          column: 4,
        }}
        dataSource={questionBankList}
        renderItem={(item) => <Item>{questionBankView(item)}</Item>}
      />
    </div>
  );
};
export default QuestionBankList;
